﻿@model List<SW.Lite.Model.Master.ButtonModel>
@using SW.Lite.Core.Extensions
@{
    ViewBag.Title = "按钮管理";
    Layout = "~/Areas/Master/Views/Shared/_Layout.cshtml";
}
@section Header{
    <script type="text/javascript">
        function add() {
            $("#addDialog").dialog({
                title: '添加菜单',
                modal: true,
                width: 600,
                buttons: [
                    {
                        text: "确定",
                        click: function () {
                            Utils.ajax({
                                url: '@Url.Action("ButtonAdd")',
                                data: { 'MenuID': $('#MenuID').val(), 'Icon': $('#Icon').val(), 'Code': $('#Code').val(), 'Title': $('#Title').val(), 'Attributes': $('#Attributes').val() },
                                type: 'POST',
                                success: function (d) { if (d.Result) location.reload(); },
                                error: function (status) { }
                            });
                        }
                    }, {
                        text: '取消',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            }

            function edit() {
                var menuIDs = [];
                $('.cboItem:checked').each(function (i, n) {
                    menuIDs.push($(n).val());
                });
                if (menuIDs.length != 1) {
                    Utils.alert('消息', '请选择要修改的菜单，且只能选择一项！');
                    return;
                }

                Utils.ajax({
                    url: '@Url.Action("ButtonSingle")',
                data: { 'id': menuIDs[0] },
                type: 'POST',
                success: function (menu) {
                    Utils.setObject2Dom(menu);
                    $('#ButtonIcon').removeAttr('class');
                    $('#ButtonIcon').addClass('ic-16');
                    $('#ButtonIcon').addClass(menu.Icon);
                    $('#Code').attr('readonly', 'readonly');
                    $('#Code').addClass('disabled');
                    $("#addDialog").dialog({
                        title: '编辑菜单',
                        modal: true,
                        width: 600,
                        buttons: [
                            {
                                text: "确定",
                                click: function () {
                                    Utils.ajax({
                                        url: '@Url.Action("ButtonEdit")',
                                        data: { 'ID': $('#ID').val(), 'MenuID': $('#MenuID').val(), 'Icon': $('#Icon').val(), 'Code': $('#Code').val(), 'Title': $('#Title').val(), 'Attributes': $('#Attributes').val() },
                                        type: 'POST',
                                        success: function (d) { if (d.Result) location.reload(); },
                                        error: function (status) { }
                                    });
                                }
                            }, {
                                text: '取消',
                                click: function () {
                                    $(this).dialog("close");
                                }
                            }
                        ]
                    });
                },
                error: function (status) { }
            });
            }

            function selectIcon(icon, src) {
                $('#ButtonIcon').removeAttr('class');
                $('#ButtonIcon').addClass('ic-16');
                $('#ButtonIcon').addClass('ic-' + $(icon).attr('key'));
                $('#Icon').val('ic-' + $(icon).attr('key'));
            }

            function returnParent() {
                location.href = '@Url.Action("Index")';
        }
    </script>
    <style type="text/css">
        .icons { height: 200px; overflow: auto; }
            .icons ul { list-style: none; }
                #MenuIcon, .icons ul li { width: 16px; height: 16px; margin: 3px; padding: 4px; -ms-border-radius: 4px; border-radius: 4px; }
                .icons ul li { float: left; }
                    .icons ul li img { cursor: pointer; }
        #ButtonIcon, .table .ic-16 { background-position: center center; width: 16px; height: 16px; line-height: 16px; -ms-border-radius: 4px; border-radius: 4px; display: inline-block; vertical-align: middle; }
    </style>

}
<div class="panel grid_8">
    <div class="panel-header">
        <span class="i-24 i-user">按钮管理 - 【@ViewBag.Menu.Title】</span>
    </div>
    <div class="panel-body">
        <div class="panel-toolbar top clearfix">
            <ul>
                <li><a class="ic-16 ic-add" onclick="add();">添加</a></li>
                <li><a class="ic-16 ic-edit" onclick="edit();">编辑</a></li>
                <li><a class="ic-16 ic-arrow-undo" onclick="returnParent();">返回</a>
            </ul>
        </div>
        <div class="dataTables_wrapper">
            <table class="datatable-fn table">
                <thead>
                    <tr>
                        <th style="width: 30px;">
                            <input type="checkbox" onchange="Utils.checkAll(this.checked);" /></th>
                        <th style="width: 80px;">按钮图标</th>
                        <th style="width: 100px;">按钮编码</th>
                        <th style="width: 100px;">按钮名称</th>
                        <th style="width: auto;">按钮属性</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td class="center">
                                <input class="cboItem" type="checkbox" value="@item.Id" /></td>
                            <td class="center"><span class="ic-16 @item.Icon"></span></td>
                            <td class="center">@item.Code</td>
                            <td class="center">@item.Title</td>
                            <td>@item.Attributes</td>
                        </tr>
                    }
                </tbody>
            </table>
            <div class="dataTables_paginate paging_full_numbers">
                <span>
                    @Html.Pager(20, (int)ViewBag.RecordCount)
                </span>
            </div>
        </div>
    </div>
</div>
<div id="addDialog" class="hide">
    <div class="form-inline form">
        <div class="form-row">
            <label>按钮图标</label><span class="ic-16" id="ButtonIcon"></span><input id="Icon" type="hidden" /><input id="ID" type="hidden" /><input id="MenuID" type="hidden" value="@ViewBag.MenuID" />
            <div class="icons">
                <ul>
                    @foreach (var file in ViewBag.Icons)
                    {
                        <li>
                            <img src="~/Areas/Master/Common/icons/16/@file.Value" key="@file.Key" onclick="selectIcon(this, '/Areas/Master/Common/icons/16/@file.Value');" /></li>
                    }
                </ul>
            </div>
        </div>
        <div class="form-row">
            <label>按钮编码</label>
            <div class="form-item large">
                <input id="Code" class="textinput" type="text" />
            </div>
        </div>
        <div class="form-row">
            <label>按钮名称</label>
            <div class="form-item large">
                <input id="Title" class="textinput" type="text" />
            </div>
        </div>
        <div class="form-row">
            <label>按钮属性</label>
            <div class="form-item large">
                <input id="Attributes" class="textinput" type="text" />
            </div>
        </div>
    </div>
</div>
